// 封装通用逻辑
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onUnmounted } from 'vue'
export function useLazyData (apiFn) {
  /*
    stop 一个可执行的函数用来停止监听行为
    target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
    isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
    useIntersectionObserver @vueuse/core包的内置API
    */
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        //   调用api获取数据
        apiFn()
        // 调用一次api后停止监听 避免反复调用api
        stop()
      }
    },
    // 进入可视区域的比例是多少才执行回调0-1值越大 代表需要进入的面积越大
    { threshold: 0 }
  )
  return { target }
}
// 封装倒计时
export function MyCountDown (time) {
  const countTime = ref(0)
  let timer = null
  function resume () {
    timer = setInterval(() => {
      // time是传入的时间
      if (countTime.value <= 0) {
        clearInterval(timer)
      } else {
        countTime.value--
      }
    }, 1000)
  }
  // 调用该函数 开始倒计时
  function start () {
    countTime.value = time
    resume()
  }
  onUnmounted(() => {
    pause()
  })
  function pause () {
    clearInterval(timer)
  }
  return {
    countTime,
    start,
    pause
  }
}
// 使用插件封装倒计时
export function useCountDown (time) {
  const countTime = ref(0)
  const { resume, pause } = useIntervalFn(() => {
    if (countTime.value <= 0) {
      pause()
    } else {
      countTime.value--
    }
  }, 1000, false)
  // 组件销毁后手动销毁定时器
  onUnmounted(() => {
    pause()
  })
  function start () {
    countTime.value = time
    resume()
  }
  return {
    countTime,
    start,
    pause
  }
}
